<template>
  <div>
    <div class="m-record" v-if="uids.peopleCanSeeMyPlayRecord">
      <!-- 听歌排行标题 -->
      <div class="u-title u-title-1 f-cb m-record-title">
        <h3><span class="f-ff2 s-fc3">听歌排行</span></h3>
        <h4>累积听歌{{ uids.listenSongs }}首</h4>
        <span class="n-iconpoint">
          <a href="javascript:;" class="icon u-icn2 u-icn2-5 j-flag"></a>
          <div class="tip">
            <p>实际播放时间过短的歌曲将不纳入计算。</p>
            <i class="t"></i>
            <i class="b"></i>
          </div>
        </span>
        <div class="nav f-cb">
          <span
            id="songsall"
            :class="{ 'z-sel': !listenFlag }"
            @click.stop=" UserAllRecord"
            >所有时间</span
          >
          <i></i>
          <span :class="{ 'z-sel': listenFlag }" @click.stop=" UserWeekRecord"
            >最近一周</span
          >
        </div>
      </div>
      <!-- 最近一周 默认显示 -->
      <div v-if="listenFlag">
        <div class="n-nmusic" v-if="!week_listenMSList.length">
          <h3 class="f-ff2"><i class="u-icn u-icn-21"></i>暂无听歌记录</h3>
        </div>
        <ul>
          <li
            :class="{ even: index % 2 == 0 }"
            v-for="(item, index) in week_listenMSList"
            :key="index"
          >
            <div class="hd">
              <span class="ply"></span>
              <span class="num">{{ index + 1 }}.</span>
            </div>
            <div class="song">
              <div class="tt">
                <div class="txt">
                  <a href="javascript:;"
                    ><b :title="item.song.name">{{ item.song.name }}</b></a
                  >
                  <span class="ar s-fc8"><em>-</em></span>
                  <a
                    href="javascript:;"
                    title="段镇宇"
                    class="s-fc8"
                    v-for="(ar, i) in item.song.ar"
                    :key="i"
                  >
                    {{ ar.name }}
                    <slot v-if="i !== item.song.ar.lenfth - 1"> / </slot>
                  </a>
                </div>
              </div>
              <div class="opt">
                <a
                  href="javascript:;"
                  class="u-icn u-icn-81 icn-add"
                  title="添加"
                ></a>
                <span class="icn icn-fav" title="收藏"></span>
                <span class="icn icn-share" title="分享"></span>
                <span class="icn icn-dl" title="下载"></span>
              </div>
            </div>
            <div class="tops">
              <span class="bg" :style="{ width: item.score + '%' }"></span>
            </div>
          </li>
        </ul>
      </div>
      <!-- 所有时间 -->
      <div v-if="!listenFlag">
        <ul>
          <li
            :class="{ even: index % 2 == 0 }"
            v-for="(item, index) in all_listenMSList"
            :key="index"
          >
            <div class="hd">
              <span class="ply"></span>
              <span class="num">{{ index + 1 }}.</span>
            </div>
            <div class="song">
              <div class="tt">
                <div class="txt">
                  <a href="javascript:;"
                    ><b :title="item.song.name">{{ item.song.name }}</b></a
                  >
                  <span class="ar s-fc8"><em>-</em></span>
                  <a
                    href="javascript:;"
                    title="段镇宇"
                    class="s-fc8"
                    v-for="(ar, i) in item.song.ar"
                    :key="i"
                  >
                    {{ ar.name }}
                    <slot v-if="i !== item.song.ar.lenfth - 1"> / </slot>
                  </a>
                </div>
              </div>
              <div class="opt">
                <a
                  href="javascript:;"
                  class="u-icn u-icn-81 icn-add"
                  title="添加"
                ></a>
                <span class="icn icn-fav" title="收藏"></span>
                <span class="icn icn-share" title="分享"></span>
                <span class="icn icn-dl" title="下载"></span>
              </div>
            </div>
            <div class="tops">
              <span class="bg" :style="[{ width: item.score + '%' }]"></span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 用户创建的歌单 -->
    <div v-if="myMS.length">
      <div class="u-title u-title-1 f-cb m-record-title">
        <h3><span class="f-ff2">{{userInfo ? userInfo.nickname : null}}创建的歌单（{{myMS.length?myMS.length :null}}）</span></h3>
      </div>
      <ul class="m-cvrlst f-cb">
          <li v-for="(item , index) in myMS" :key="index">
            <div class="u-cover u-cover-1">
              <img :src="item.coverImgUrl" :alt="item.name">
              <a href="javascript:;" class="msk" @click.stop="send_exhibition(item.name , item.creator.nickname , item.id)"></a>
              <div class="bottom">
                <a href="javascript:;" class="icon-play f-fr"></a>
                <span class="icon-headset"></span>
                <span class="nb">{{item.playCount}}</span>
              </div>
            </div>
            <p class="dec">
              <a href="javascript:;" class="tit f-thide s-fc0">{{item.name}}</a>
            </p>
          </li>
      </ul>
    </div>
    <!-- 用户收藏的歌单 -->
    <div v-if="mySub.length">
      <div class="u-title u-title-1 f-cb m-record-title">
        <h3><span class="f-ff2">{{userInfo ? userInfo.nickname : null}}收藏的歌单（{{ mySub.length? mySub.length :null}}）</span></h3>
      </div>
      <ul class="m-cvrlst f-cb">
          <li v-for="(item , index) in mySub" :key="index">
            <div class="u-cover u-cover-1">
              <img :src="item.coverImgUrl" :alt="item.name">
              <a href="javascript:;" class="msk"></a>
              <div class="bottom">
                <a href="javascript:;" class="icon-play f-fr"></a>
                <span class="icon-headset"></span>
                <span class="nb">{{(item.playCount / 10000).toFixed(1) + '万'}}</span>
              </div>
            </div>
            <p class="dec">
              <a href="javascript:;" class="tit f-thide s-fc0">{{item.name}}</a>
            </p>
          </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { user_record } from "../../network/user";
import {userPlaylist , LoginStatus} from '../../network/login'

export default {
  props: ["uids",'userInfo'],
  data() {
    return {
      listenSongs: null, //累计听歌数量
      playlistCount:null, //创建的歌单数量
      nickname : null ,  // 用户昵称
      all_listenMSList: [], //所有播放记录
      week_listenMSList: [], //一周播放记录
      listenFlag: true, //最近一周 | 所有时间 切换的开关
      myMS:[],  //用户创建的歌单
      mySub:[]  //用户收藏的歌单
    };
  },
  methods: {
    UserWeekRecord() {
      if(this.uids && this.uids.peopleCanSeeMyPlayRecord){
        this.listenFlag = true
      user_record(this.uids.uid, 1).then((res) => {
        //一周
        if (res.data.weekData.length > 10) {
          this.week_listenMSList = res.data.weekData.splice(0, 10);
          return;
        }
        this.week_listenMSList = res.data.weekData;
        } , err => {
          console.log("一周播放历史不存在")
      });
      }
    },
     UserAllRecord(){
         if(this.uids && this.uids.peopleCanSeeMyPlayRecord){
           this.listenFlag = false
            user_record(this.uids.uid, 0).then((res) => {
            //所有
          if (res.data.allData.length > 10) {
            this.all_listenMSList = res.data.allData.splice(0, 10);
            return;
          }
          this.all_listenMSList = res.data.allData;
          },err => {
              console.log("全部播放历史不存在")
          });
         }
     },
    user_Playlist(uid){
        userPlaylist(uid).then(res =>{
            res.data.playlist.forEach(item => {
                if(item.userId == uid){
                  this.myMS.push(item)
                }else{
                  this.mySub.push(item)
                }
            });
        } ,err => {
           console.log("报错了")
        })
    },
    send_exhibition(name,nickname , id){
      if(name.includes(nickname) && !this.$store.state.userId){
        window.sessionStorage.needLogin_id = id
        this.$router.push({path:'/home/playlist' , query:{id : id}})
      }else{
        this.$router.push({path:'/home/playlist' , query:{id : id}})
      }
    }
  },
  created() {
      this.user_Playlist(this.uids.uid)
      this.UserWeekRecord();
  },
};
</script>
<style scoped>
.m-record-title {
  position: relative;
  z-index: 2;
}
.u-title-1 {
  height: 33px;
}
.u-title {
  border-bottom: 2px solid #c20c0c;
}
.u-title-1 h3 {
  font-size: 20px;
  line-height: 28px;
}
.u-title h3 {
  float: left;

  font-weight: normal;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.f-ff2 {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.m-record-title h4 {
  float: left;
  display: inline;
  margin-top: 5px;
  margin-left: 10px;
  line-height: 26px;
  font-weight: 400;
  color: #666;
}
.n-iconpoint {
  position: relative;
  margin-left: 10px;
  left: -1px;
  top: 8px;
  line-height: 18px;
  z-index: 2;
}
.n-iconpoint:hover :nth-child(2) {
  display: block;
}
.u-icn,
.u-icn2,
.u-icn3 {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.u-icn2 {
  background: url("../../assets/imgs/icon2.png") no-repeat 0 9999px;
}
.u-icn2-5 {
  width: 18px;
  height: 18px;
  background-position: 0 -50px;
}
.n-iconpoint div.tip {
  position: absolute;
  left: -33px;
  top: 30px;
  display: none;
  width: 295px;
  font-size: 12px;
  line-height: 20px;
  padding: 8px 19px 7px 19px;
  z-index: 2;
  color: #666;
}
.n-iconpoint div.tip {
  background: url("https://s2.music.126.net/style/web2/img/top_m.png?2bdbc60e6c11d0a3015f2460e6753413")
    0 0 repeat-y;
}
.n-iconpoint div.tip i.t {
  position: absolute;
  width: 327px;
  height: 16px;
  left: 0;
  top: -16px;
}
.n-iconpoint div.tip i.t {
  background: url("https://s2.music.126.net/style/web2/img/top_t.png?60dc0406c062938db9282bd31feca3bf")
    0 0 no-repeat;
}
.n-iconpoint div.tip i.b {
  position: absolute;
  width: 327px;
  height: 12px;
  left: 0;
  bottom: -12px;
}
.n-iconpoint div.tip i.b {
  background: url("https://s2.music.126.net/style/web2/img/top_b.png?968fb4de2ba789bb6a99995548baf909")
    0 0 no-repeat;
}
.m-record-title .nav {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 5px;
}
.m-record-title .nav span {
  line-height: 26px;
  color: #666;
  cursor: pointer;
}
.m-record-title .nav span,
.m-record-title .nav i {
  float: right;
  margin-left: 8px;
}
.m-record-title .nav i {
  width: 1px;
  height: 12px;
  margin-top: 7px;
  background-color: #999;
}
.m-record-title .nav span.z-sel {
  color: #333;
  font-weight: 700;
}
.m-record {
  margin-bottom: 36px;
}
.n-nmusic {
  padding: 105px 0 105px 0;
  text-align: center;
}
.n-nmusic h3 {
  padding-bottom: 38px;
  font-size: 18px;
}
.n-nmusic .u-icn-21 {
  margin-right: 17px;
}

.m-record ul {
  border: 1px solid #e2e2e2;
  border-top: none;
}
.m-record li {
  height: 38px;
  line-height: 38px;
  overflow: hidden;
}
.m-record li:hover {
  background-color: #f7f7f7;
}
.m-record li .hd {
  float: left;
  width: 72px;
  height: 38px;
  overflow: hidden;
}
.m-record li .song {
  float: left;
  position: relative;
  z-index: 1;
  zoom: 1;
  padding-left: 10px;
  width: 480px;
  height: 38px;
  overflow: hidden;
}
.m-record li .tops {
  float: right;
  position: relative;
  z-index: 1;
  zoom: 1;
  width: 319px;
  height: 38px;
  line-height: 38px;
}
.m-record .ply,
.m-record span.icn {
  background: url("../../assets/imgs/table.png") no-repeat 0 9999px;
}
.m-record .ply {
  float: right;
  display: inline;
  margin-top: 10px;
  width: 17px;
  height: 17px;
  cursor: pointer;
  background-position: 0 -103px;
}
.m-record .ply:hover {
  background-position: 0 -128px;
}
.m-record li .hd .num {
  float: left;
  display: inline;
  padding-left: 5px;
  padding-right: 8px;
  width: 37px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  color: #666;
}
.m-record li .song .tt {
  float: left;
  width: 100%;
}
.m-record li .song .tt .txt {
  position: relative;
  display: inline-block;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a,
a *,
.f-hand,
.f-hand * {
  cursor: pointer;
}
.s-fc8,
a.s-fc8:hover {
  color: #aeaeae;
}
.m-record li .song .tt .ar em {
  margin: 0 5px;
}
.m-record .opt {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 11px;
  width: 92px;
  height: 20px;
  overflow: hidden;
}

.m-record .icn-add {
  float: left;
  margin-top: 2px;
}
.u-icn,
.u-title-1 .out .icon {
  background: url("../../assets/imgs/icon.png") no-repeat 0 9999px;
}
.u-icn-21 {
  width: 64px;
  height: 50px;
  background-position: 0 -347px;
}
.u-icn-81 {
  width: 13px;
  height: 13px;
  background-position: 0 -700px;
}
.u-icn-81:hover {
  background-position: -22px -700px;
}
.m-record span.icn {
  float: left;
  width: 18px;
  height: 16px;
  margin: 2px 0 0 8px;
  overflow: hidden;
  text-indent: -999px;
  cursor: pointer;
}
.m-record span.icn-fav {
  background-position: 0 -174px;
}
.m-record span.icn-fav:hover {
  background-position: -20px -174px;
}
.m-record span.icn-share {
  background-position: 0 -195px;
}
.m-record span.icn-share:hover {
  background-position: -20px -195px;
}
.m-record span.icn-dl {
  background-position: -81px -174px;
}
.m-record span.icn-dl:hover {
  background-position: -104px -174px;
}
.m-record li .tops span.bg {
  position: absolute;
  z-index: 1;
  height: 38px;
  background-color: #4eb4f5;
  opacity: 0.1;
}
.m-record li.even {
  background-color: #f7f7f7;
}
.m-cvrlst {
    margin: 20px 0 0 -50px;
}
.f-cb::after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    visibility: hidden;
}
.m-cvrlst li {
    float: left;
    height: 165px;
    overflow: hidden;
    display: inline-block;
    width: 140px; 
    padding: 0 0 30px 50px;
    line-height: 1.4;
}
.u-cover-1 {
    width: 140px;
    height: 140px;
}
.u-cover {
    position: relative;
    display: block;
}
.u-cover img {
    display: block;
    width: 100%;
    height: 100%;
}
.u-cover .msk {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.u-cover .bottom, .u-cover .msk, .n-musicsd .lst .avatar .msk {
    background: url("../../assets/imgs/coverall.png") no-repeat;
}
.u-cover-1 .msk {
    background-position: 0 0;
}
.u-cover .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 27px;
    background-position: 0 -537px;
    color: #ccc;
}
.icon-headset, .u-cover .icon-play{
    background-image: url("../../assets/imgs/iconall.png");
}
.u-cover .icon-headset, .u-cover .icon-play {
    display: inline-block;
}
.u-cover .icon-play {
    position: absolute;
    right: 10px;
    bottom: 5px;
    width: 16px;
    height: 17px;
    background-position: 0 0;
}
.u-cover .icon-headset {
    float: left;
    width: 14px;
    height: 11px;
    background-position: 0 -24px;
    margin: 9px 5px 9px 10px;
}
.u-cover .nb {
    float: left;
    margin: 7px 0 0 0;
}
.m-cvrlst li .dec {
    margin: 8px 0 3px;
    font-size: 14px;
}
.m-cvrlst li p {
    width: 100%;
}
</style>